<template>
  <div class="comment-reply-wrap">
    <!-- 头部信息 -->
    <van-nav-bar 
      class="nav-bar"
      :title="`${comment.reply_count}条回复`"
    >
      <van-icon 
        slot="left" 
        name="cross"
        @click="$emit('close')"
      />
    </van-nav-bar>

    <div class="comemnt-wrap">
      <!-- 当前评论项 -->
      <comment-item 
        class="comment-item"
        :comment="comment"
      /> 
      <!-- 回复列表 -->
      <!-- 封装的评论回复列表是包含的 -->
      <!-- <van-cell title="所有回复"/> -->
      <!-- 评论列表 -->
      <comment-list
        class="comment-list" 
        :commentList="commentList"
        :source="comment.com_id"
        :type="'c'"
        :articleId="comment.com_id"
      >
      </comment-list>
    </div>
    <!-- 底部区域 -->
    <article-bottom-bar 
      :isShowBtn="false"
      @postCommentClick="isPostCommentPopshow = true"
    ></article-bottom-bar>
    <!-- 发布评论pop -->
    <!-- 不设置高度，则由内容撑开 -->
    <van-popup 
      v-model="isPostCommentPopshow" 
      position="bottom" 
    >
      <post-comment 
        :target="comment.com_id"
        :article-id="articleId"
        @post-success="postSuccess"
      />
    </van-popup>
  </div>
</template>

<script>
import CommentItem from "./comment-item"
import CommentList from "./comment-list"
import ArticleBottomBar from "./article-bottom-bar"; 
import PostComment from "./post-comment";

export default {
  name: "CommentReply",
  components: {
    CommentItem,
    CommentList,
    ArticleBottomBar,
    PostComment
  },
  props: {
    comment: {
      type: Object,
      required: true 
    },
    articleId: {
      type: [Number, String, Object]
    }
  },
  data() {
    return {
      isPostCommentPopshow: false,
      commentList: []
    };
  },
  computed: {},
  watch: {},
  methods: {
    postSuccess(comment) {
      // 将发布成功的评论放到评论列表的顶部
      this.commentList.unshift(comment);
      // 封信评论的回复数量
      this.comment.reply_count++;
      // 关闭发布回复的弹出层
      this.isPostCommentPopshow = false;
    }
  },
  created() {},
  mounted() {},
};
</script>

<style lang="less" scoped>
//@import url(); 引入公共css类
.comment-reply-wrap {
  .nav-bar {
    position: fixed;
    left: 0;
    right: 0;
    top: 10%;
  }
  .comemnt-wrap {
    position: fixed;
    top: 16%;
    left: 0;
    right: 0;
    bottom: 44px;
    overflow: scroll;
    // .comment-list {
    //   position: relative;
    //   bottom: 44px;
    // }
  }
  // 底部区域
  .article-bottom {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    box-sizing: border-box;
    background-color: #fff;
    display: flex;
    justify-content: space-around;
    align-items: center;
    height: 44px;
    border-top: 1px solid #d8d8d8;
    .comment-btn {
      width: 160px;
    }
    .van-icon {
      font-size: 20px;
    }
    .comment-icon {
      bottom: -2px;
    }
    .share-icon {
      bottom: -2px;
    }
  }
}
</style>
